﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TimeLine.aspx.cs" Inherits="NX5Web.admin.BaseData.MathConfig.TimeLine" %>

<style>
    .question-list-edit{
        display: flex;
        flex-flow: column;
        width: 100%;
    }
    .question-list-edit .el-card{ --el-card-padding: 8px; }
    .question-row{ display: flex; }
    .questions{ flex: 1; }
    .question-options{ flex-shrink: 0; width: 150px; text-align: center; }
    .question-options .el-button+.el-button{ margin-left: 5px !important; }
    .el-upload {
        --el-upload-picture-card-size: 50px;
    }
    .el-upload-list{
        --el-upload-picture-card-size: 50px;
    }
    .el-upload--picture-card>i{ font-size: 18px; }
    .el-upload-list--picture-card .el-upload-list__item-actions{ font-size: 16px; }
    .el-upload-list--picture-card .el-upload-list__item-actions span+span{ margin-left:2px; }
</style>

<div id="timeLineConfig">
    <el-dialog v-model="visible" style="--el-dialog-margin-top:8vh" title="时间线脚本配置" width="1500" @close="handleClose">
        <div>
            <!-- 播放器容器 -->
            <div id="mse"></div>
            <!-- 操作按钮 -->
            <div style="margin-top: 15px;">
                <el-button type="primary" @click="handleSctiptAdd" plain size="small" icon="Edit">新增</el-button>
            </div>
            <!-- 脚本列表 -->
            <el-table
                :data="VideoTimeList"
                :header-cell-style="headerCellStyle"
                row-key="ID"
                border
                style="width: 100%; margin-top: 10px;"
            >
                <el-table-column prop="Title" label="脚本名称"></el-table-column>
                <el-table-column prop="Time" label="触发时间"></el-table-column>
                <el-table-column prop="Options" label="操作">
                    <template #default="props">
                        <el-button type="primary" @click="handleSctiptEdit(props.row)" plain size="small" icon="EditPen">编辑</el-button>
                        <el-button type="danger" plain size="small" icon="Delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSaveData">确 定</el-button>
            </div>
        </template>
    </el-dialog>

    <ajax-component
        v-if="visibleTimeScript"
        url="/admin/BaseData/MathConfig/TimeLineScript.html"
        :data="TimeScriptObject"
        @emit-back="handleTimeScriptBack"
    ></ajax-component>
</div>

<script>

    // 播放器文档
    // https://h5player.bytedance.com/api/

    createApp({
        el: '#timeLineConfig',
        data() {
            return {
                visible: true,
                visibleTimeScript: false,
                player: null,
                MediaInfo: {},
                Option: '',
                currentTimeSctipt: {},
                VideoTimeList: [],
                QuestionList: [],
                headerCellStyle: {
                    backgroundColor: 'rgb(236, 245, 255)'
                },
                Qtype: [
                    {
                        value: 1,
                        label: '选择题'
                    },
                    {
                        value: 2,
                        label: '简答题'
                    }
                ]
            }
        },
        computed: {
            TimeScriptObject() {
                return {
                    option: this.Option,
                    scriptTitle: this.currentTimeSctipt.Title,
                    scriptTime: this.currentTimeSctipt.Time,
                    timeId: this.currentTimeSctipt.ID,
                    videoId: this.currentTimeSctipt.VideoId,
                    player: {
                        currentTime: this.player.currentTime,
                        duration: this.player.duration
                    }
                }
            }
        },
        methods: {
            handleSctiptEdit(question) {
                // 暂停播放
                this.player.pause();
                this.Option = 'edit';
                this.currentTimeSctipt = question;
                this.visibleTimeScript = true;
            },
            handleSctiptAdd(question) {
                // 暂停播放
                this.player.pause();
                this.Option = 'add';
                this.currentTimeSctipt = {
                    VideoId: this.MediaInfo.ID,
                    Title: '练一练',
                    Time: this.player.currentTime,
                };
                this.visibleTimeScript = true;
            },
            getVideoTimeList() {
                ktlapi({
                    action: 'Cus_GetMathCourseVideoTime',
                    data: { VideoId: this.MediaInfo.ID }
                }).then(resp => {
                    this.VideoTimeList = resp.data || [];
                })
            },
            /** 初始化数据 */
            initData() {
                const MediaInfo = this.pageQuery;
                console.log('MediaInfo', MediaInfo)
                if (!MediaInfo.TimeLine) {
                    MediaInfo.TimeLine = [];
                }
                if (isString(MediaInfo.TimeLine)) {
                    try {
                        MediaInfo.TimeLine = JSON.parse(MediaInfo.TimeLine);
                    } catch (e) {
                        console.log('TimeLine 反序列化失败', MediaInfo.TimeLine);
                        MediaInfo.TimeLine = [];
                    }
                }
                this.MediaInfo = MediaInfo;
            },
            /** 初始化播放器 */
            initPlayer() {
                this.$nextTick(() => {
                    if (this.MediaInfo.Video) {
                        this.player = new window.Player({
                            id: 'mse',
                            url: this.MediaInfo.Video,
                            height: '400px',
                            width: '100%',
                            seekedStatus: 'pause'
                        });
                        // 添加监听事件
                        const Events = window.Player.Events
                        this.player.on(Events.SEEKED, () => {
                            console.log('Events.SEEKED', this.player)
                            console.log('Events.SEEKED', this.player.currentTime, '秒')
                        })
                    }
                })
            },
            handleTimeScriptBack(data) {
                console.log('handleTimeScriptBack data', data);
                this.visibleTimeScript = false;
                if (data.action === 'refresh') {
                    this.getVideoTimeList();
                }
            },
            handleAddTimeClose() {
                this.visibleTimeScript = false;
            },
            formatSecondsToHMS(seconds) {
                const hrs = Math.floor(seconds / 3600);
                const mins = Math.floor((seconds % 3600) / 60);
                const secs = Math.floor(seconds % 60);

                return {
                    hours: hrs,
                    minutes: mins,
                    seconds: secs
                };
            },
            /** 弹窗关闭事件 */
            handleClose() {
                this.player.destroy() // 销毁播放器
                this.player = null // 将实例引用置空
                this.sendEmit({ action: 'close' })
            },
            /** 保存数据 */
            handleSaveData() {
                this.player.destroy()
                this.player = null
                this.sendEmit({ action: 'refresh' })
            }
        },
        /** vue生命周期钩子函数 */
        mounted() {
            // 初始化数据
            this.initData();
            // 初始化播放器
            this.initPlayer();
            // 获取触发事件
            this.getVideoTimeList();
        }
    })
</script>